<template>
  <div id="app">
    <component :is="layoutComponent"></component>
  </div>
</template>


<script>
import DefaultLayout from './components/DefaultLayout.vue';
import LoginLayout from './components/Login.vue';
import Register from './components/Register.vue';

export default {
  components: {
    LoginLayout, DefaultLayout, Register
  },
  data() {

    return {}
  },
  computed: {
    layoutComponent() {
      // 动态判断 渲染组件
      if (this.$route.name === 'register') {
        return Register;
      } else if (this.$route.name === 'login') {
        return LoginLayout;
      }else {
        return DefaultLayout;
      }
    },
  },
};
</script>

<style>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>

